<!--骑手管理-骑手新增-->
<template>
  <div class="my-resouce-add-container" v-loading="loading">
    <el-form ref="form" :model="form" label-width="120px" style="padding: 10px">
      <p class="item-title">基本信息:</p>
      <el-row :gutter="0">
        <el-col :span="6">
          <el-form-item label="骑手姓名:">
            <el-input v-model="form.ridername"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="骑手分区">
            <el-select v-model="form.areaid" placeholder="请选择">
              <el-option
                v-for="item in agentPartitionData.agent_area_list"
                :key="item.areaid"
                :label="item.areaname"
                :value="item.areaid">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="骑手手机号:">
            <el-input v-model="form.ridermobile"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="骑手班期:">
            <el-select v-model="form.deliver_day_night" placeholder="请选择">
              <el-option
                v-for="item in deliverDayNight"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="骑手头像:">
        <el-upload
          class="avatar-uploader"
          :action="uploadURL"
          :show-file-list="false"
          :on-success="handleSellerImageSuccess">
          <img v-if="fullImgUrl.riderimage" :src="fullImgUrl.riderimage" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <p class="item-title">身份信息:</p>
      <el-row :gutter="0">
        <el-col :span="6">
          <el-form-item label="身份证号码:">
            <el-input v-model="form.rider_nationalid"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="0">
        <el-col :span="6" style="text-align: center">
           <p >健康证正面图:</p>
           <el-upload
              class="avatar-uploader"
              :action="uploadURL"
              :show-file-list="false"
              :on-success="handleNationalid_1ImageSuccess">
              <img v-if="fullImgUrl.rider_image_nationalid_1" :src="fullImgUrl.rider_image_nationalid_1" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
           </el-upload>
        </el-col>
        <el-col :span="6" style="text-align: center">
          <p >健康证正面图:</p>
          <el-upload
              class="avatar-uploader"
              :action="uploadURL"
              :show-file-list="false"
              :on-success="handleNationalid_2ImageSuccess">
              <img v-if="fullImgUrl.rider_image_nationalid_2" :src="fullImgUrl.rider_image_nationalid_2 "
                   class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-col>
        <el-col :span="6" style="text-align: center">
          <p >健康证正面图:</p>
          <el-upload
              class="avatar-uploader"
              :action="uploadURL"
              :show-file-list="false"
              :on-success="handleCert_1ImageSuccess">
              <img v-if="fullImgUrl.rider_image_cert_1" :src="fullImgUrl.rider_image_cert_1" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-col>
        <el-col :span="6" style="text-align: center">
          <p >手持身份证正面图:</p>
          <el-upload
                class="avatar-uploader"
                :action="uploadURL"
                :show-file-list="false"
                :on-success="handleNationalid_3ImageSuccess">
            <img v-if="fullImgUrl.rider_image_nationalid_3" :src="fullImgUrl.rider_image_nationalid_3"
                 class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-col>
      </el-row>
      <p class="item-title">其他信息:</p>
      <el-row>
        <el-col :span="6">
          <el-form-item label="">
            <el-checkbox v-model="form.isOnDutyNow">现在开始上班</el-checkbox>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="骑手密码:">
            <el-input v-model="form.riderpassword"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">确认</el-button>
        <el-button @click="$router.go(-1)">取消</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
  import md5 from "js-md5"

  export default {
    data() {
      return {
        pathArr: [
          {path: "/", name: "首页"},
          {path: "/container/rider_list", name: "骑手列表"},
          {path: "/container/rider_add", name: "骑手新增"},
        ],
        form: {
          riderid: "",
          areaid: "",
          ridername: "",
          ridermobile: "",
          riderimage: "",
          riderpassword: "",
          deliver_day_night: "",
          on_duty_now: "",
          rider_nationalid: "",
          rider_image_nationalid_1: "",
          rider_image_nationalid_2: "",
          rider_image_nationalid_3:"",
          rider_image_cert_1: "",
          isOnDutyNow: true
        },
        fullImgUrl: {
          riderimage: "",
          rider_image_nationalid_1: "",
          rider_image_nationalid_2: "",
          rider_image_nationalid_3:"",
          rider_image_cert_1: "",
        },
        uploadURL: "",//图片上传Url
        agentPartitionData: "",//分区列表
        loading: false,
        deliverDayNight: [{id: "0", name: "白班"}, {id: "1", name: "夜班"}]
      }
    },
    mixins: [],
    components: {},
    beforeRouteLeave(to, from, next) {
      next();
    },
    mounted() {
    },
    activated() {
      this.initCurrentPath();
      this.initUploadURL();
      this.requestVideoTypes();
      this.initRiderInfo();
    },
    deactivated() {
      this.$destroy(true);
    },
    methods: {
      //初始化面包屑路径
      initCurrentPath() {
        if (this.$utils.isEmpty(this.$route.query.riderid)) {
          this.$store.commit('changeCurrentLocation', this.pathArr);
          return;
        }
        this.pathArr = [
          {path: "/", name: "首页"},
          {path: "/container/rider_list", name: "骑手列表"},
          {path: "/container/rider_add", name: "骑手修改"},
        ];
        this.$store.commit('changeCurrentLocation', this.pathArr);
      },

      //初始化图片上传地址
      initUploadURL() {
        this.uploadURL = this.$http.initUploadImgURL(this);
      },

      //商户头像上传成功
      handleSellerImageSuccess(res, file) {
        if (res.result === "error") {
          this.$message({message: '上传失败！', type: 'warning'});
          return;
        }
        this.form.riderimage = res.url;
        this.fullImgUrl.riderimage = this.$utils.genImgURL(res.url);
      },

      //身份证1上传成功
      handleNationalid_1ImageSuccess(res, file) {
        if (res.result === "error") {
          this.$message({message: '上传失败！', type: 'warning'});
          return;
        }
        this.form.rider_image_nationalid_1 = res.url;
        this.fullImgUrl.rider_image_nationalid_1 = this.$utils.genImgURL(res.url);
      },

      //身份证2上传成功
      handleNationalid_2ImageSuccess(res, file) {
        if (res.result === "error") {
          this.$message({message: '上传失败！', type: 'warning'});
          return;
        }
        this.form.rider_image_nationalid_2 = res.url;
        this.fullImgUrl.rider_image_nationalid_2 = this.$utils.genImgURL(res.url);
      },

      //身份证3上传成功
      handleNationalid_3ImageSuccess(res, file) {
        if (res.result === "error") {
          this.$message({message: '上传失败！', type: 'warning'});
          return;
        }
        this.form.rider_image_nationalid_3 = res.url;
        this.fullImgUrl.rider_image_nationalid_3 = this.$utils.genImgURL(res.url);
      },

      //执照1上传成功
      handleCert_1ImageSuccess(res, file) {
        if (res.result === "error") {
          this.$message({message: '上传失败！', type: 'warning'});
          return;
        }
        this.form.rider_image_cert_1 = res.url;
        this.fullImgUrl.rider_image_cert_1 = this.$utils.genImgURL(res.url);
      },

      //执照2上传成功
      handleCert_2ImageSuccess(res, file) {
        if (res.result === "error") {
          this.$message({message: '上传失败！', type: 'warning'});
          return;
        }
        this.form.seller_image_cert_2 = res.url;
        this.fullImgUrl.seller_image_cert_2 = this.$utils.genImgURL(res.url);
      },


      //修改时初始化参数
      initRiderInfo() {
        this.form.riderid = this.$route.query.riderid;
        this.form.areaid = this.$route.query.areaid;
        this.form.riderimage = this.$route.query.riderimage;
        this.form.ridername = this.$route.query.ridername;
        this.form.ridermobile = this.$route.query.ridermobile;
        this.form.deliver_day_night = this.$route.query.deliver_day_night;
        this.form.on_duty_now = this.$route.query.on_duty_now;
        if (this.form.on_duty_now === "0") {
          this.form.isOnDutyNow = false;
        } else if (this.form.on_duty_now === "1") {
          this.form.isOnDutyNow = true;
        } else {
          this.form.isOnDutyNow = false;
        }
        this.form.rider_nationalid = this.$route.query.rider_nationalid;
        this.form.rider_image_nationalid_1 = this.$route.query.rider_image_nationalid_1;
        this.form.rider_image_nationalid_2 = this.$route.query.rider_image_nationalid_2;
        this.form.rider_image_nationalid_3 = this.$route.query.rider_image_nationalid_3;
        this.form.rider_image_cert_1 = this.$route.query.rider_image_cert_1;
        if (this.$utils.isEmpty(this.form.riderid)) {
          return;
        }
        this.fullImgUrl.riderimage = this.$utils.genImgURL(this.form.riderimage);
        this.fullImgUrl.rider_image_nationalid_1 = this.$utils.genImgURL(this.form.rider_image_nationalid_1);
        this.fullImgUrl.rider_image_nationalid_2 = this.$utils.genImgURL(this.form.rider_image_nationalid_2);
        this.fullImgUrl.rider_image_nationalid_3 = this.$utils.genImgURL(this.form.rider_image_nationalid_3);
        this.fullImgUrl.rider_image_cert_1 = this.$utils.genImgURL(this.form.rider_image_cert_1);
      },

      //获取文章分类分类信息
      requestVideoTypes() {
        let parameter = new URLSearchParams();
        parameter.append("action", "agent_area_list");
        let that = this;
        that.loading = true;
        this.$http.requestAuthData(that, parameter, function (data) {
          that.agentPartitionData = data;
        });
      },

      //确认提交
      onSubmit() {
        if (this.$utils.isEmpty(this.form.ridername)) {
          this.$message({message: '姓名未填写！', type: 'warning'});
          return;
        }
        if (this.$utils.isEmpty(this.form.ridermobile) || !this.$utils.isPhoneNum(this.form.ridermobile)) {
          this.$message({message: '手机号未填写为格式不正确！', type: 'warning'});
          return;
        }
        if (this.$utils.isEmpty(this.form.riderimage)) {
          this.$message({message: '骑手头像未上传！', type: 'warning'});
          return;
        }
        if (this.$utils.isEmpty(this.form.riderid) && this.$utils.isEmpty(this.form.riderpassword)) {
          this.$message({message: '密码未设置！', type: 'warning'});
        }
        if (this.$utils.isEmpty(this.form.deliver_day_night)) {
          this.$message({message: '骑手班期未设置！', type: 'warning'});
          return;
        }
        if (this.form.isOnDutyNow) {
          this.form.on_duty_now = 1;
        } else {
          this.form.on_duty_now = 0;
        }
        if (this.$utils.isEmpty(this.form.rider_nationalid)) {
          this.$message({message: '身份证号未填写！', type: 'warning'});
          return;
        }
        if (this.$utils.isEmpty(this.form.rider_image_nationalid_1)) {
          this.$message({message: '骑手身份正面图未上传！', type: 'warning'});
          return;
        }
        if (this.$utils.isEmpty(this.form.rider_image_nationalid_2)) {
          this.$message({message: '骑手身份反面图未上传！', type: 'warning'});
          return;
        }
        if (this.$utils.isEmpty(this.form.rider_image_nationalid_3)) {
          this.$message({message: '手持身份证正面图未上传！', type: 'warning'});
          return;
        }
        if (this.$utils.isEmpty(this.form.rider_image_cert_1)) {
          this.$message({message: '营业执照正面图未上传！', type: 'warning'});
          return;
        }

        let parameter = new URLSearchParams();
        parameter.append("riderid", this.form.riderid);
        parameter.append("areaid", this.form.areaid);
        parameter.append("ridername", this.form.ridername);
        parameter.append("ridermobile", this.form.ridermobile);
        parameter.append("riderimage", this.form.riderimage);
        if (!this.$utils.isEmpty(this.form.riderpassword)) {
          parameter.append("riderpassword", md5(this.form.riderpassword));
        }
        parameter.append("deliver_day_night", this.form.deliver_day_night);
        parameter.append("on_duty_now", this.form.on_duty_now);
        parameter.append("rider_nationalid", this.form.rider_nationalid);
        parameter.append("rider_image_nationalid_1", this.form.rider_image_nationalid_1);
        parameter.append("rider_image_nationalid_2", this.form.rider_image_nationalid_2);
        parameter.append("rider_image_nationalid_3", this.form.rider_image_nationalid_3);
        parameter.append("rider_image_cert_1", this.form.rider_image_cert_1);
        if (this.$utils.isEmpty(this.form.riderid)) {
          this.requestAddRider(parameter);
        } else {
          this.requestModifyRider(parameter);
        }
      },

      //发送添加请求
      requestAddRider(parameter) {
        parameter.append("action", "agent_rider_create");
        let that = this;
        that.loading = true;
        this.$http.requestAuthData(that, parameter, function (data) {
          that.$message({type: 'success', message: '添加成功!'});
          that.$router.go(-1);
        });
      },

      //发送修改请求
      requestModifyRider(parameter) {
        parameter.append("action", "agent_rider_modify");
        let that = this;
        that.loading = true;
        this.$http.requestAuthData(that, parameter, function (data) {
          that.$message({type: 'success', message: '修改成功!'});
          that.$router.go(-1);
        });
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss" scoped="" type="text/scss">

  .my-resouce-add-container {
    height: 100%;
    width: 100%;
    padding: 10px;
    overflow: auto;
  }

  //start 商户头像上传部分
  .avatar-uploader .el-upload {
    display: inline-block;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    border: 1px dashed #d9d9d9;
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  //end 商户头像上传部分
  .item-title {
    height: 48px;
    line-height: 48px;
    font-weight: bolder;
    border-bottom: 1px solid lightgray;
    margin-bottom: 10px;
  }
</style>
